<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户登录</title>
    <link rel="stylesheet" href="../css/loginCss.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <header>
        <div style="padding-left:250px;padding-right:250px;padding-bottom: 5px;">
            <img src="../static/image/similarLogo.png" alt="用户登录" style="width:180px;height: 70px;">
            <span style="font-size:25px;position:absolute;top:35px;">欢迎登录</span>
            <a href="/page/questionnaire" style="float:right;margin-top:50px;"><i class="glyphicon glyphicon-comment"></i>登录页面,调查问卷</a>
        </div>
        <p class="msg" style="padding-left:100px;margin:0px;">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</p>
    </header>
    <article>
        <div id="box">
            <p class="msg">京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
            <c:if test="${requestScope.loginResult != null}">
                <div class="alert alert-danger" style="width:310px; margin-left:5%; margin-bottom: 10px;">
                    <strong>${requestScope.loginResult}</strong>
                </div>
            </c:if>
            <form action="/service/user_login" method="post" style="width:90%;margin:5% 5%;">
                    <div class="form-group">
                        <label for="userName">Username:</label>
                        <input type="text" class="form-control" id="userName" placeholder="Enter Username" name="username">
                        <span id="userMsg" style="color:red;"></span>
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="password">
                        <span id="pwdMsg" style="color:red;"></span>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox"> Remember me
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width:100%;" onclick="return submit()">立即登录</button>
                    <p style="margin-top:10px;">
                        <a href="">忘记密码？</a>
                        <a href="/page/register" >立即注册</a>
                    </p>
            </form>
            <div class="formFooter" style="width: 100%;height:50px;position:absolute;bottom:0px;
                   background: gainsboro;text-align: center;color:gray;padding-top:5px;">
                <span>京东后台会自动读入您的操作信息</span><br>
                <span>以保证您信息的安全</span>
            </div>
        </div>
    </article>
    <footer>
        <ul>
            <li><a href="#">关于我们</a><span>|</span></li>
            <li><a href="#">联系我们</a><span>|</span></li>
            <li><a href="#">人才招聘</a><span>|</span></li>
            <li><a href="#">商家入驻</a><span>|</span></li>
            <li><a href="#">广告服务</a><span>|</span></li>
            <li><a href="#">手机京东</a><span>|</span></li>
            <li><a href="#">友情链接</a><span>|</span></li>
            <li><a href="#">销售联盟</a><span>|</span></li>
            <li><a href="#">京东社区</a><span>|</span></li>
            <li><a href="#">京东公益</a></li>
        </ul>
        <p style="margin-left:40%;margin-top:10px;font-size:10px;">Copyright &copy;2004-2021 科技学院 hnkjxy.com 版权所有</p>
    </footer>



    <script>
        let input = $('input');
        for(let i = 0; i < input.length - 1; i++){
            $(input[i]).on('blur',function(){
                let name = $(input[i]).attr('name'),value = $(input[i]).val();
                if(name == 'username'){
                    let match = /^1[35789]\d{9}$/;
                    $('#userMsg').text(value.length == 0 ? '请输入用户名' : !match.test(value) ? "格式不正确" : "");
                }else if(name == 'password'){
                    $('#pwdMsg').text(value.length == 0 ? '请输入密码' : value.length < 6 ? '密码长度不能小于六位' : '');
                }
            });
        }

        function submit(){
            for(let i = 0; i < input.length - 1; i++){
                if($(input[i].val() == '')) return false;
            }
            return true;
        }
    </script>
</body>
</html>
